<template>
<!--    <div id="secondLevel" @click="pageClick">-->
    <div id="secondLevel">
        <slot></slot>
        <p>{{text}}</p>
    </div>
</template>

<script>
    export default {
        name: "secondLevel",
        props: {
            text: String,
            path: '',
            imgUrl: {
                type: String,
                default: "~assets/img/home/ywlb.png"
            }
        },
        methods: {
            // pageClick() {
            //     this.$router.push(this.path)
            // }
        }
    }
</script>

<style scoped>
    .secondLevel {
        position: relative;
        width: 311px;
        height: 204px;
        background: url("../../../assets/img/home/border_bg.png");
        background-size: 311px 204px;
        text-align: center;
    }

    .secondLevel img {
        width: 76px;
        height: 69px;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .secondLevel p {
        font-size: 40px;
        color: var(--color-high-text);
        white-space: nowrap;
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

</style>
